<template>
	<view class="container">
		<quick-button></quick-button>
		<view class="top-container">
			<uni-nav-bar :border="false" title="护士上门" color="white" backgroundColor="transparent" :statusBar="true"
				left-icon="location" left-text="雁塔区"></uni-nav-bar>
			<view class="search-container-view">
				<view class="search-view" @click="navToSearchList">
					<image src="../../static/home_nav_search.png" class="icon"></image>
					<input disabled placeholder="打针|换药" />
					<view class="search-text">搜索</view>
				</view>
			</view>
			<view>
				<uni-swiper-dot field="content" mode="round" :current="current" :info="topAreaGridList" :dots-styles="{
					bottom: 0,
					backgroundColor: '#EFEFEF',
					selectedBackgroundColor: '#0BC5AE',
					border: 'none',
					selectedBorder: 'none',
				}">
					<swiper style="height: calc(155rpx * 2 + 20rpx)" @change="onSwiperChange">
						<swiper-item v-for="(citem, cindex) in topAreaGridList">
							<view class="top-grid-view-wrap">
								<view class="top-grid-view">
									<view class="grid-card-item-inner"
										@click="navToCategory(item, index + cindex * current * 6)"
										v-for="(item, index) in citem">
										<view class="grid-card-item">
											<view class="title">{{ item.proFirstClassName }}</view>
											<view class="content">{{ item.proDes }}</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>
		<view class="top-tab-view">
			<image class="tab-img" src="../../static/home_card_tab1.png"></image>
			<image class="tab-img2" src="../../static/home_card_tab2.png"></image>
		</view>
		<swiper class="swiper-view">
			<swiper-item>
				<image class="swiper-img" src="https://applet.youtuyiliao.com/profile/avatar/2022/12/29/home_banner.png"></image>
			</swiper-item>
		</swiper>
		<view class="card-container-view">
			<view class="card-view">
				<view class="title-view">
					<view class="title">为您推荐</view>
					<view class="more-btn" @click="navToSearchList">
						查看更多
						<image src="../../static/item_go.png" style="width: 20rpx; height: 20rpx"></image>
					</view>
				</view>
				<view class="body">
					<view class="list-item" v-for="item in itemList" @click="navToDetails(item)">
						<image :src="item.picImg" class="list-img" mode="aspectFill"></image>
						<view class="content-view">
							<view class="title">{{ item.proName }}</view>
							<view class="content three-line-ellipsis">
								{{ item.sketch | htmlToTextFilters }}
							</view>
						</view>
					</view>
				</view>
				<view class="footer">没有更多了</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as proFirstClass from "../../common/api/proFirstClass.js";
import * as medicalProjects from "../../common/api/medicalProjects.js";
import * as loginUtils from "../../utils/loginUtils.js";
export default {
	data() {
		return {
			typeList: [],
			itemList: [],
			current: 0,
		};
	},
	onShow() { },
	mounted() {
		this.login();
		this.getTypeList();
		this.getItemList();
	},
	computed: {
		topAreaGridList() {
			const splitArray = (array, chunkSize) => {
				const result = [];
				const length = array.length;
				for (let i = 0; i < length; i += chunkSize) {
					const chunk = array.slice(i, i + chunkSize);
					result.push(chunk);
				}
				return result;
			};
			const list = splitArray(this.typeList, 6);
			console.log(list);
			return list;
		},
	},
	methods: {
		onSwiperChange(e) {
			this.current = e.detail.current;
		},
		login() {
			loginUtils.checkRegister();
			// loginUtils.login()
		},
		navToCategory(item, index) {
			uni.navigateTo({
				url: "/patientAppPages/pages/category/category?index=" + index,
			});
		},
		getTypeList() {
			const params = {
				// pageIndex:1,
				// pageSize:6
			};
			proFirstClass
				.queryByPage(params)
				.then((result) => {
					this.typeList = result.data.data.rows;
				})
				.catch((error) => {
					console.log(error);
				});
		},
		getItemList() {
			const param = {
				pageIndex: 1,
				pageSize: 3,
			};
			medicalProjects
				.queryByPage(param)
				.then((result) => {
					this.itemList = result.data.data.rows;
				})
				.catch((error) => {
					console.log(error);
				});
		},
		navToDetails(item) {
			uni.navigateTo({
				url:
					"/patientAppPages/pages/serviceDetails/serviceDetails?uid=" +
					item.uid,
			});
		},
		navToSearchList() {
			uni.navigateTo({
				url: "/patientAppPages/pages/searchList/searchList",
			});
		},
		navBack() {
			uni.navigateBack();
		},
	},
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
	.top-container {
		width: 100%;
		padding-bottom: 20rpx;
		background: linear-gradient(to bottom, #0bc5ae, #f9f9f9);

		.top-grid-view-wrap {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.top-grid-view {
			width: calc(100% - 20rpx);
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(auto-fit, calc(100% / 3));

			.grid-card-item {
				width: 100%;
				min-height: 144rpx;
				border-radius: 12rpx;
				background: linear-gradient(to bottom, #e3fffc, #f4fffe);
				display: flex;
				flex-direction: column;
				padding: 10rpx;
				box-sizing: border-box;

				.title {
					font-size: 15.56px;
					color: rgba(35, 35, 35, 1);
					font-weight: bold;
				}

				.content {
					font-size: 13.25px;
					color: rgba(35, 35, 35, 0.5);
					margin-top: 10rpx;
					line-height: 35rpx;
					letter-spacing: 1px;
				}
			}

			.grid-card-item-inner {
				padding: 6rpx;
				box-sizing: border-box;
			}
		}
	}
}

.search-container-view {
	width: 100%;
	padding: 10rpx 20rpx;
	box-sizing: border-box;

	.search-view {
		width: 100%;
		height: 64rpx;
		background: white;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		input {
			height: 100%;
			flex: 1;
			font-size: 26rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.search-text {
			font-size: 30rpx;
			color: #0bc5ae;
		}
	}
}

.top-tab-view {
	width: 100%;
	display: flex;
	padding: 0 20rpx;
	box-sizing: border-box;

	.tab-img {
		width: 100%;
		height: 160rpx;
	}

	.tab-img2 {
		width: 100%;
		height: 160rpx;
		margin-left: 10rpx;
	}
}

.swiper-view {
	height: 180rpx;
	padding: 0 20rpx;
	margin-top: 20rpx;

	.swiper-img {
		width: 100%;
		height: 180rpx;
	}
}

.card-container-view {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;

	.card-view {
		width: 100%;
		background: white;
		padding-top: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;

		.title-view {
			width: 100%;
			display: flex;
			padding: 24rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.title {
				color: #232323;
				font-size: 34rpx;
				font-weight: bold;
			}

			.more-btn {
				color: rgba(35, 35, 35, 0.4);
				font-size: 24rpx;
			}
		}

		.body {
			width: 100%;
			display: flex;
			flex-direction: column;

			.list-item {
				width: 100%;
				height: 230rpx;
				padding-left: 24rpx;
				padding-right: 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				border-bottom: solid 1rpx #f8f8f8;

				.list-img {
					width: 174rpx;
					height: 174rpx;
					border-radius: 20rpx;
				}

				.content-view {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;

					.title {
						color: #232323;
						font-size: 15.56px;
						font-weight: bold;
					}

					.content {
						margin-top: 20rpx;
						font-size: 13.25px;
						color: rgba(35, 35, 35, 0.7);
						margin-top: 10rpx;
						letter-spacing: 1px;
					}
				}
			}
		}

		.footer {
			height: 70rpx;
			font-size: 22rpx;
			color: rgba(35, 35, 35, 0.4);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

::v-deep.uni-nav-bar-text {
	font-size: 17px;
}
</style>
